<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 - 回声网络</title>
    <!-- 引入Element CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        body { margin: 0; padding: 20px; background: #f5f7fa; }
        .login-container { max-width: 400px; margin: 50px auto; padding: 24px; background: #fff; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.1); }
        .el-form-item { margin-bottom: 20px; }
    </style>
</head>
<body>
<div class="login-container">
    <h2 style="text-align: center; margin-bottom: 24px;">回声网络 - 登录</h2>
    <div th:if="${errorMsg != null}" class="error" style="color: red; text-align: center; margin-bottom: 16px;"><span th:text="${errorMsg}"></span></div>
    <div class="error" style="color: red; text-align: center; margin-bottom: 16px; display: none;"></div>
    <form action="/echo-network/login" method="post" class="el-form">
        <!-- 用户名 -->
        <div class="el-form-item">
            <div class="el-input">
                <input type="text" name="username" placeholder="请输入用户名" required
                       class="el-input__inner" autocomplete="username">
            </div>
        </div>
        <!-- returnUrl隐藏字段，用于登录成功后重定向 -->
        <input type="hidden" name="returnUrl" id="returnUrl" value="">
        <!-- 密码 -->
        <div class="el-form-item">
            <div class="el-input">
                <input type="password" name="password" placeholder="请输入密码" required
                       class="el-input__inner" autocomplete="current-password">
            </div>
        </div>

        <!-- 登录按钮 -->
        <div class="el-form-item">
            <button type="submit" class="el-button el-button--primary el-button--large" style="width: 100%;">
                登录
            </button>
        </div>
        <!-- 注册链接 -->
        <div style="text-align: center; margin-top: 16px;">
            还没有账号？<a href="/echo-network/register" style="color: #1890ff;">立即注册</a>
        </div>
    </form>
</div>

<!-- 引入Element JS依赖（Vue+Element） -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    // 从Cookie中获取指定名称的值
    function getCookie(name) {
        const cookieString = document.cookie;
        console.log('所有Cookie:', cookieString);
        const cookies = cookieString.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            console.log('检查Cookie:', cookie);
            if (cookie.startsWith(name + '=')) {
                const value = cookie.substring(name.length + 1);
                console.log('找到Cookie ' + name + ': ' + value);
                return value;
            }
        }
        console.log('未找到Cookie ' + name);
        return null;
    }
    
    // 初始化Element组件
    new Vue({
        el: '.login-container',
        mounted() {
            // 从URL参数中获取信息
            const urlParams = new URLSearchParams(window.location.search);
            const errorMsg = urlParams.get('errorMsg');
            const registerSuccess = urlParams.get('registerSuccess');
            const logoutStatus = urlParams.get('logout');
            const returnUrl = urlParams.get('returnUrl');
            const errorElement = document.querySelector('.error');
            
            // 设置returnUrl到隐藏字段
            if (returnUrl) {
                document.getElementById('returnUrl').value = returnUrl;
            } else {
                // 如果URL参数中没有，检查是否有从request.setAttribute传递的returnUrl
                // 通过检查document.referrer判断是否需要返回到来源页面
                const referrer = document.referrer;
                if (referrer && referrer.includes('/echo-network/article-detail')) {
                    document.getElementById('returnUrl').value = referrer;
                }
            }
            
            // 处理注销状态提示
            if (logoutStatus === 'success') {
                errorElement.textContent = '注销成功！';
                errorElement.style.color = '#67c23a'; // 设置为成功的绿色
                errorElement.style.display = 'block';
            } 
            // 处理注销失败提示
            else if (logoutStatus === 'fail') {
                errorElement.textContent = '注销失败，请重试！';
                errorElement.style.color = 'red'; // 设置为错误的红色
                errorElement.style.display = 'block';
            }
            // 处理注册成功提示
            else if (registerSuccess === 'true') {
                errorElement.textContent = '注册成功！请登录您的账号。';
                errorElement.style.color = '#67c23a'; // 设置为成功的绿色
                errorElement.style.display = 'block';
            } 
            // 处理错误信息
            else if (errorMsg) {
                errorElement.textContent = decodeURIComponent(errorMsg);
                errorElement.style.color = 'red'; // 恢复为错误的红色
                errorElement.style.display = 'block';
            } else {
                errorElement.style.display = 'none';
            }
        }
    });
</script>
</body>
</html>